<!--
/**
* Author: gaohui
* Date: 2023-03-15 15:42
* Desc: SkeletonComp 骨架屏组件基础使用方法
*/
-->

<template>
  <div class="flex mb10 a-center">
    <div class="mr10">骨架屏loading状态:</div>
    <el-switch v-model="loading" />
  </div>
  <el-skeleton animated :loading="loading" />
  <br />
  <el-skeleton animated :loading="loading" style="--el-skeleton-circle-size: 100px">
    <template #template>
      <el-skeleton-item variant="circle" />
    </template>
  </el-skeleton>
</template>

<script name="SkeletonComp" lang="ts" setup>
import { ref } from "vue";

const loading = ref(true);
</script>
<style lang="scss" scoped></style>
